<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>商品图</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="内容样式" name="1">
          <el-form size="medium" label-width="100px">
            <el-form-item label="图标颜色:"><ColorPicker :color="data.color" :name="'icon'"></ColorPicker></el-form-item>
            <el-form-item label="文字颜色:"><ColorPicker :color="data.color" :name="'text'"></ColorPicker></el-form-item>
            <el-form-item label="角标颜色:"><ColorPicker :color="data.color" :name="'badge'"></ColorPicker></el-form-item>
            <el-form-item label="左按钮颜色:"><ColorPicker :color="data.color" :name="'btn_l'"></ColorPicker></el-form-item>
            <el-form-item label="右按钮颜色:"><ColorPicker :color="data.color" :name="'btn_r'"></ColorPicker></el-form-item>
            <el-form-item label="背景颜色:"><ColorPicker :color="data.color" :name="'bg'"></ColorPicker></el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="内容" name="2">
          <el-form size="medium" label-width="100px">
            <el-form-item label="左侧按钮">
              <draggable element="div" v-model="data.list" :animation="500">
                <div class="bg-color" v-for="(item, i) in data.list" :key="i">
                  <i class="el-icon-error cancal" @click="delitem(i)"></i>
                  <el-form size="medium" label-width="100px">
                    <el-form-item label="图标">
                      <div class="icon_box">
                        <span class="hasIcon" v-show="item.icon != ''">
                          <i :class="item.icon + ' iconfont'"></i>
                          <i class="icon-abl-close el-icon-error" @click="removeIcon(i)"></i>
                          <span class="choose_bar" @click="chooseIcon(i)"><i class="txt">替换</i></span>
                        </span>
                        <span class="noIcon" v-show="item.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon(i)"></i></span>
                      </div>
                    </el-form-item>
                    <el-form-item label="按钮文字"><el-input placeholder="留空则不显示" v-model="item.text" maxlength="4"></el-input></el-form-item>
                    <el-form-item label="跳转链接">
                      <div @click="selectlink(item, i)"><Linkdiv :linkdata="item.linkdata"></Linkdiv></div>
                    </el-form-item>
                  </el-form>
                </div>
              </draggable>
            </el-form-item>
            <el-form-item label="右侧按钮">
              <draggable element="div" v-model="data.btnlist" :animation="500">
                <div class="bg-color" v-for="(item, i) in data.btnlist" :key="i">
                  <el-form size="medium" label-width="100px">
                    <el-form-item label="是否显示">
                      <el-radio-group v-model="item.show">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="0">隐藏</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="按钮文字"><el-input v-model="item.text" placeholder="" maxlength="5"></el-input></el-form-item>
                    <el-form-item label="按钮功能">
                      <el-radio-group v-model="item.type">
                        <el-radio :label="1">加入购物车</el-radio>
                        <el-radio :label="2">下单</el-radio>
                        <el-radio :label="3">询价</el-radio>
                        <el-radio :label="4">跳转链接</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="跳转链接" v-if="item.type == 4">
                      <div @click="selectlink(item, i)"><Linkdiv :linkdata="item.linkdata"></Linkdiv></div>
                    </el-form-item>
                  </el-form>
                </div>
              </draggable>
            </el-form-item>
          </el-form>
          <el-button v-if="data.list.length < 3" @click="addlist">添加</el-button>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import ColorPicker from '@/components/ColorPicker/index';
import draggable from 'vuedraggable';
import Linkdiv from '@/components/Link/index';

export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      activeNames: ['1', '2'],
      index: 0
    };
  },
  components: {
    ColorPicker,
    draggable,
    Linkdiv
  },

  methods: {
    removeIcon(i) {
      this.data.list[i].icon = '';
    },
    chooseIcon(i) {
      this.index = i;
      this.$parent.showiconselcet();
    },

    geticon(data) {
      this.data.list[this.index].icon = data;
    },
    /*选择器开始*/
    selectlink(item, i) {
      this.acivedata = item;
      this.activid = i;
      this.$parent.showlinkselcet(item);
    },
    getAData(item) {
      this.acivedata.linkdata = item;
    },
    addlist() {
      this.data.list.push({
        icon: '',
        text: '',
        linkdata: {
          link: '',
          name: '',
          id: '',
          type: ''
        }
      });
    },
    delitem(i) {
      this.data.list.splice(i, 1);
    }
  }
};
</script>
<style lang="scss">
.bg-color {
  .el-form-item__content {
    line-height: 26px !important;
  }
}
</style>
<style lang="scss" scoped>
.bg-color {
  border: 1px solid #e9edef;
  box-sizing: border-box;
  padding: 20px 20px 20px 0;
  border-radius: 2px;
  background: #f4f6f8;
  position: relative;
  margin-bottom: 20px;
  &:hover {
    .cancal {
      display: block;
    }
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  .cancal {
    font-size: 20px;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    display: none;
  }
}
</style>
